<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<style>
  .router-link-active{
    background-color: red;
  }
</style>
</head>
<body>

  <div id='app'>

    <router-link tag="button" to="/home">首页</router-link>
    <!-- <router-link tag="button" :to="{
      path: '/news',
      query: {
        a: 10,
        b: 20
      }
    }">新闻页</router-link> -->
    <button @click="enterNews">新闻页</button>
    <router-link tag="button" to="/about">关于</router-link>
    <hr>
    <!-- 路由组件的出口 -->
    <router-view />
  </div>

<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js'></script>
<script src="./vue-router.js"></script>
<script>
  const Home = {
    template: `
      <div>
        home页
      </div>
    `
  }
  const About = {
    template: `
      <div>
        关于我们
      </div>
    `
  }
  const News = {
    template: `
      <div>
        新闻页
      </div>
    `,
    mounted(){
      console.log(this.$route);
    },
    watch: {   // 监听动态路由的变化
      $route(to, from){
        console.log('变化了');
      }
    }
  }
  // 定义路由
  const routes = [   // 配置路由规则
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/news',
      name: 'news',
      component: News
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
  const router = new VueRouter({  // 注册路由
    routes
  })
  const app = new Vue({
    el: '#app'
    ,router   // 挂载实例
    ,methods: {
      enterNews(){
        this.$router.push({
          path: '/news',
          query: {
            a: 10,
            b: 20
          }
        })
      }
    }
  })

  window.onhashchange = function() {
    console.log('hash变化了');
  }
</script>
</body>
</html>